const pageCls = 'page'
const activePageCls = ' active'
const flippedPageCls = ' flipped'
var bookDom = document.querySelector('.book')

bookDom.onclick = event => {
    const currentPage = event.path.filter(e => e?.className?.includes(pageCls))?.[0]
    if (!currentPage) {
        event.stopPropagation()
        return
    }
    const preElement = currentPage.previousElementSibling
    const nextPage = currentPage.nextElementSibling

    if (currentPage.className?.includes(activePageCls.trim())) {
        currentPage.className = currentPage.className.replace(activePageCls, flippedPageCls)
        if (nextPage) {
            nextPage.className = nextPage.className + activePageCls
        }

    } else if (currentPage.className?.includes(flippedPageCls.trim())) {
        currentPage.className = currentPage.className.replace(flippedPageCls, activePageCls)
        if (nextPage) {
            nextPage.className = nextPage.className.replace(activePageCls, '')
        }
    }
}